<template>
    <!-- 数据列表 -->
    <div class="oprations_box">
        <div class="left_search">
            <el-icon :size="20" color="#444545">
                <Tickets />
            </el-icon>
            <span>数据列表</span>
        </div>
        <div class="right_btn">
            <el-button type="primary" @click="addMenuListFn(0)">
                添加
            </el-button>
            <!-- <template #default="{ row }">
                    <el-button type="primary" @click="router.push('/ums/addMenu?id=' + row.id)">添加</el-button>
                </template> -->
        </div>
    </div>

    <!-- 27.65写 Table 表格 -->
    <div class="table_box">
        <el-table :data="list" border style="width: 100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="title" label="菜单名称" />
            <el-table-column prop="parentId" label="菜单级数">
                <template #default="{ row }">
                        {{row.parentId==0 ? "一级":"二级"}}
                    </template>
            </el-table-column>
            <el-table-column prop="name" label="前端名称" />
            <el-table-column prop="icon" label="前端图标">
                <template #default="{ row }">
                    <i class="iconfont" :class="row.icon" style="color: #666!important;"> </i>
                </template>
            </el-table-column>
            <el-table-column prop="hidden" label="是否显示">
                <template #default="{ row }">
                    <el-switch v-model="row.hidden" :active-value="0" :inactive-value="1" @change="switchChange(row)" />
                </template>
            </el-table-column>
            <el-table-column prop="level" label="排序" />
            <el-table-column prop="" label="设置">
                <template #default="{ row }">
                    <el-button type="primary" link :disabled="row.name == 'ums' ? true : false"
                        @click="params.parentId = row.id">查看下级</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="" label="操作">
                <template #default="{ row }">
                    <el-button type="primary" link @click="addMenuListFn(row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <PaginationTwo v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
        :total="total" />
</template>
<script setup lang='ts'>
import useTable from '@/hooks/useTable'
import { Tickets } from '@element-plus/icons-vue'
import PaginationTwo from '@/components/Pagination/PaginationTwo.vue'
import { ApiGetMenuList, ApiUpdateHidden } from "@/http/api"
import { ref, reactive, toRefs, watch } from 'vue'
// @ts-ignore
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter();


const searchParams = reactive({
    parentId: 0
}) 
const { list, pageNum, pageSize, total } = useTable(ApiGetMenuList, searchParams)

const switchChange = (hid: IMenuModel) => {
    ApiUpdateHidden({
        id: hid.id,
        hidden: hid.hidden,
        parentId: 0,
        createTime: '',
        title: '',
        level: 0,
        sort: 0,
        name: '',
        icon: ''
    }).then(res => {

        if (res.code === 200) {
            console.log(res);
            // 弹框提示用户
            ElMessage({
                type: 'success',
                message: '修改用户状态成功'
            })
        } else {
            hid.hidden = hid.hidden === 0 ? 1 : 0
        }
    })
}
// 编辑，添加
let addMenuListFn = (row: IAddMenuModel | 0) => {
    if (row === 0) {
        router.push('/ums/addMenu')
    } else {
        localStorage.setItem('menuList', JSON.stringify(row))
        router.push(`/ums/addMenu?id=${row.id}`)
    }
}

const tableData = ref<IMenuModel[]>([])
// const total = ref(0)


const params = reactive<IGetMenuListParams>({
    pageNum: 1,
    pageSize: 5,
    parentId: 0
})

const requestMenuList = () => {
    ApiGetMenuList(params).then(res => {
        if (res.code === 200) {
            tableData.value = res.data.list
            total.value = res.data.total
        }
    })
}
requestMenuList();

let { parentId } = toRefs(params)
watch([parentId], () => {
    requestMenuList();
})

</script>
<style lang="less" scoped>
// 数据列表
.oprations_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    box-shadow: 0 0 4px 2px #eee;
    margin-bottom: 20px;
    border-radius: 2px;

    .left_search {
        display: flex;
        align-items: center;

        span {
            font-size: 14px;
            color: #303133;
            margin-left: 10px;
        }
    }
}

.iconfont {
    color: #666;
}
</style>